<template>
    <div>
        <v-dialog v-model="dialog" max-width="700px">
            <v-data-table :headers="recordHeaders" :items="recordDesserts" :items-per-page="5"
                class="elevation-1"></v-data-table>
        </v-dialog>
        <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1">
            <!-- 顶部插槽 -->
            <template v-slot:top>
                <v-toolbar flat>
                    <v-toolbar-title>测试计划</v-toolbar-title>
                    <v-divider class="mx-4" inset vertical></v-divider>
                    <v-spacer></v-spacer>
                </v-toolbar>
            </template>
            <!-- 关联用例插槽 -->
            <template v-slot:item.testcases="{ item }">
                [
                <span v-for="(i, index) in item.testcases" :key="i.id">
                    {{ i.name }}
                    <span v-if="index !== item.testcases.length - 1">,</span>
                </span>
                ]
                <!-- <span v-for="i in item.testcases">{{ i.name }},</span> -->
            </template>
            <!-- 操作插槽 -->
            <template v-slot:item.actions="{ item }">
                <v-btn small color="success" class="mr-2" @click="buildPlan(item)">执行</v-btn>
                <v-btn small color="primary" class="mr-2" @click="getRecord(item)">历史记录</v-btn>
                <v-btn small color="warning" @click="deletePlan(item)">删除</v-btn>
            </template>
        </v-data-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dialog: false,
            recordHeaders: [
                { text: '记录ID', align: 'start', sortable: false, value: 'id', },
                { text: '报告地址', value: 'report' },
                { text: '创建时间', value: 'create_time' },
            ],
            recordDesserts: [],
            headers: [
                { text: '计划ID', align: 'start', sortable: false, value: 'id', },
                { text: '计划名称', value: 'name' },
                { text: '关联用例', value: 'testcases' },
                { text: '操作', value: 'actions' }
            ],
            desserts: [],
            buildList: []
        }
    },
    created() {
        this.initData()
    },
    methods: {
        // 初始化数据
        initData() {
            this.$api.plan.getPlan().then((result) => {
                // 将接口返回数据赋值给表格
                this.desserts = result.data.data
            }).catch((err) => {
                console.log('err', err)
            })
        },

        // 执行计划
        buildPlan(item) {
            this.$api.record.addRecord({ 'plan_id': item.id }).then((result) => {
                // 执行成功
                console.log('result', result)
            }).catch((err) => {
                console.log('err', err)
            })
            this.closeDelete()
        },

        // 删除计划
        deletePlan(item) {
            this.$api.plan.deletePlan({ 'id': item.id }).then((result) => {
                // 删除成功时，发起初始化数据操作
                if (result.data.code == 0) {
                    this.initData()
                }
            }).catch((err) => {
                console.log('err', err)
            })
            this.closeDelete()
        },

        // 获取指定计划的报告
        getRecord(item) {
            this.$api.record.getRecord({ 'plan_id': item.id }).then((result) => {
                // 获取成功时，发起初始化数据操作
                if (result.data.code == 0) {
                    this.recordDesserts = result.data.data
                    console.log('this.buildList', this.buildList)
                }
            }).catch((err) => {
                console.log('err', err)
            })
            this.dialog = true
        }
    }
}
</script>